<template>
  <div id="addPatient">
    <van-nav-bar
      title="密码修改"
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
      class="nav"
      fixed
      placeholder
    />
    <div class="header">
      <van-form class="form" @submit="onSubmit">
        <van-field
          class="mb"
          v-model="form.oldpwd"
          type="password"
          name="原密码"
          label="原密码"
          placeholder="请输入原密码"
          required
          :rules="[{ required: true, message: ' ' }]"
        />
        <div class="newpwd">
          <van-field
          class="mb"
          v-model="form.newpwd"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="请输入新密码"
          required
          @focus="focus"
          :rules="[{ required: true, message: ' ' }]"
          />
          <p class="pasLen">{{pasLen}}</p>
        </div>
        <div class="confirmpwd">
          <van-field
          class="mb"
          v-model="form.confirmpwd"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请确认密码"
          @focus="confFocus"
          :rules="[{ required: true, message: ' ' }]"
          required
          />
          <p class="message">{{message}}</p>
        </div>
        <p style="margin-top:30px;margin-bottom:15px;font-size:12px">注：新密码应为6~18位（数字、字母、@）</p>
        <div class="save">
            <p style="margin-bottom:15px;font-size:12px"><span style="color:red"> * </span>下次登录时，请使用新密码登录</p>
           <van-button block type="info" native-type="submit"> 确认 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { editPwd } from "@/apis/home";
export default {
  data() {
    return {
      minDate: new Date(1900, 1, 1),
      value: new Date(),
      form: {
          oldpwd:'',
          newpwd:'',
          confirmpwd:''
      },
      pasLen:'',
      pasLenShow:false,
      message:'',
      messageShow:false

    };
  },
  methods: {
    onInput(value) {
      this.$toast(value);
    },
    focus() {
      this.pasLen = ""
      this.pasLenShow = false
    },
    confFocus() {
      this.message = ""
      this.messageShow = false
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },

    onSubmit() {
      // console.log(this.form);
      
      if(6<=this.form.newpwd.length && this.form.newpwd.length<=18){
        this.pasLen = ""
        this.pasLenShow = false
        if(this.form.newpwd !== this.form.confirmpwd) {
          this.message = "两次密码不一致"
          this.messageShow = true
        }else{
            this.message = ""
            this.messageShow = false
            editPwd(this.form)
            .then((res) => {
            if (res.codes == 200) {
                this.$toast("修改成功");
                this.onClickLeft();
            }
            })
            .catch((err) => {
              if(err.msg){
                this.$toast(err.msg);
              }else{
                this.$toast("网络错误"); 
              }
            });
          }
        }else{
        this.pasLen = "新密码长度为6~18位（数字、字母、@）"
        this.pasLenShow = true
      }
    },
  },
  mounted() {},
  watch: {
    "form.gwid": {
      deep: true,
      handler: function (newV, oldV) {
        if (newV === "0") {
          this.form.gwname = "";
        }
      },
    },
  },
};
</script>

<style lang="less">
#addPatient {
//   padding-bottom: 60px;
  .van-nav-bar {
    background-color: #ededed;
  }
  .nav {
    .van-icon,
    .van-nav-bar__text {
      color: #404040;
    }
  }
  .header {
    background-color: #fff;
  }
  .form {
      height: 93vh;
    padding-top: 10vh;
  }
  .mb{
      margin-bottom: 20px;
  }
  .save {
    // background-color: #fff;
    padding: 30px 20px;
    margin: 20vh 0 16px 0;
    text-align: left;
    .code {
      margin-bottom: 15px;
      font-size: 16px;
      font-weight: 500;
      i {
        display: inline-block;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background-color: #fa5b57;
      }
    }
  }
  .newpwd,.confirmpwd{
    position: relative;
    .message,.pasLen{
      width: 100%;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: -20px;
      left: 0;
      color:#ee0a24;
    }
  }
  
}
</style>
